<!-- 预约主页面 -->
<template>
	<view class="page">
		<v-header :title="title" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<!--导航栏切换-->
			<view class="tabNav f fb marginBot30 ">
				<view class="tabItem  " v-for="(item, index) in navTab" :key="index" @click="navTap(item, index)">
					<view class="tabItems f fc" :class="{ actname: navIndex == index }">{{ item.name }}</view>
					<view class="borderbot" v-if="navIndex == index"></view>
				</view>
			</view>
			<view class="border30"></view>
			<!--新建预约-->
			<view v-if="navIndex == 0">
				<view class="appointContainer">
					<!-- 筛选 -->
					<view class="searchCont">
						<view class=" f fb marbot10">
							<view class="title">筛选</view>
							<view class="searchBtn f fc">搜索</view>
						</view>
						<view class="f searchView">
							<label>日期：</label>
							<picker class="picker fl" mode="date" :value="addquery.inspectionTime" @change="selectChange($event, 'jcTime')">
								<input type="text" v-model="addquery.inspectionTime" disabled placeholder="请选择预约时间" />
							</picker>
						</view>
					</view>

					<!--列表-->
					<scroll-view v-if="list.length > 0" scroll-y @scrolltolower="getList(0)" class="lineh">
						<view class="list-cell" v-for="(item, index) in list" :key="index" @click="AppointDetail">
							<view class="title f fb">
								<view class="name">会议室1</view>
								<text class="status">世宁大厦17层</text>
							</view>
							<view class="cont">
								<view class="status f vfs">
									<label>咨询内容:</label>
									<view class="fl">XXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX</view>
								</view>
								<view class="status f vfs">
									<label>预约时间:</label>
									<view class="fl">2021-1-31 10:00:00 至 12:00:00</view>
								</view>
								<view class="status f vfs">
									<label>会议主题:</label>
									<view class="fl">部门内部讨论会</view>
								</view>
								<view class="status f vfs">
									<label>预订单位:</label>
									<view class="fl">北京文化科技有限公司</view>
								</view>
							</view>
						</view>
						<view style="padding-bottom: 20px;"><load-more :loadingType="loadingType"></load-more></view>
					</scroll-view>
					<view v-else class="f fc fn nodata">
						<view class="img"></view>
						<view class="text">暂无数据</view>
					</view>
				</view>
			</view>
			<!--我的预约-->
			<view v-if="navIndex == 1" class="contHeight">
				<view class="appointContainer">
					<!-- 筛选 -->
					<view class="searchCont">
						<view class=" f fb marbot10">
							<view class="title">筛选</view>
							<view class="searchBtn f fc">搜索</view>
						</view>
						<view class="f searchView">
							<label>日期：</label>
							<picker class="picker fl" mode="date" :value="addquery.inspectionTime" @change="selectChange($event, 'jcTime')">
								<input type="text" v-model="addquery.inspectionTime" disabled placeholder="请选择预约时间" />
							</picker>
						</view>
						<view class="f fb searchView">
							<label>状态：</label>
							<view class="fl f fb">
								<view
									class="status f fc"
									v-for="(item, index) in statusTab"
									:key="index"
									:class="{ statusact: statuIndex == index }"
									@click="statustab(item, index)"
								>
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>

					<!--列表-->
					<scroll-view v-if="list.length > 0" scroll-y @scrolltolower="getList(0)" class="lineh">
						<view class="list-cell" v-for="(item, index) in list" :key="index" @click="AppointDetail">
							<view class="title f fb">
								<view class="name">企业入孵流程</view>
								<text class="status">{{ item.statusname }}</text>
							</view>
							<view class="cont">
								<view class="status f vfs">
									<label>咨询内容:</label>
									<view class="fl">XXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX</view>
								</view>
								<view class="status f vfs">
									<label>咨询时间:</label>
									<view class="fl">2021-1-1 12:10:11</view>
								</view>
							</view>
						</view>
						<view style="padding-bottom: 20px;"><load-more :loadingType="loadingType"></load-more></view>
					</scroll-view>
					<view v-else class="f fc fn nodata">
						<view class="img"></view>
						<view class="text">暂无数据</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import loadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		loadMore
	},
	data() {
		return {
			loadingType: 0, // 0 还有数据可以加载  , 1 重新加载， 2 没有更多了
			h: this.$h,
			title: '新建预约',
			navIndex: 0,
			navTab: [
				{
					state: 0,
					name: '会议室预约'
				},
				{
					state: 1,
					name: '咨询预约'
				}
			],
			/*我的预约参数*/
			statuIndex: 0,
			statusTab: [
				{
					state: 0,
					name: '全部'
				},
				{
					state: 1,
					name: '待接受'
				},
				{
					state: 2,
					name: '已接受'
				},
				{
					state: 3,
					name: '已取消'
				}
			],
			list: [
				{
					id: 1,
					status: 0,
					statusname: '待接受',
					title: '企业如福利一次',
					name: '北京科技有限公司1',
					time: '2021-1-1 12:10:11'
				},
				{
					id: 2,
					status: 1,
					statusname: '已接受',
					title: '企业如福利一次',
					name: '北京科技有限公司2',
					time: '2021-1-1 12:10:11'
				},
				{
					id: 3,
					status: 2,
					statusname: '已取消',
					title: '企业如福利一次',
					name: '北京科技有限公司3',
					time: '2021-1-1 12:10:11'
				}
			]
		};
	},
	methods: {
		//d导航栏切换
		navTap(item, index) {
			this.navIndex = index;
			if (this.navIndex == 0) {
				this.title = '新建预约';
			} else {
				this.title = '我的预约';
			}
		},
		//预约时间
		selectChange(e, type) {
			let than = this;
			let index = e.target.value;
			if (type == 'jcTime') {
				//检查时间
				than.addquery.inspectionTime = e.target.value;
			}
		},
		//切换我的预约状态
		statustab(item, index) {
			this.statuIndex = index;
		},
		//取消预约
		AppointDetail() {
			uni.navigateTo({
				url: './appointDetail'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.lineh {
	width: 100%;
	height: calc(100% - 235rpx);

	box-sizing: border-box;
}
.border30 {
	border-bottom: 20rpx solid #f0f0f0;
}
.martop40 {
	margin-top: 40rpx;
}
.tabNav {
	height: 80rpx;
	background: #ffffff;
	.actname {
		color: $color;
	}
	.tabItem {
		width: 50%;
		height: 100%;
		text-align: center;
		position: relative;

		.tabItems {
			width: 100%;
			height: 60rpx;
			border-right: 1px solid #e6e6e6;
			margin-top: 10rpx;
			font-size: 32rpx;
		}

		.borderbot {
			position: absolute;
			transform: translate(-50%, 0);
			left: 50%;
			bottom: 0;
			width: 40%;
			height: 5rpx;
			background: $color;
			color: $color;
		}
	}
}
.tip {
	width: 690rpx;
	margin: 60rpx auto;
	font-size: 28rpx;
	color: #888888;
	.borderleft {
		width: 15rpx;
		height: 40rpx;
		background: $color;
		margin-right: 30rpx;
	}
}
.loginBox {
	.cell {
		height: 90rpx;
		margin: 0 54rpx 30rpx 54rpx;
		border-bottom: solid 1rpx $bcolor;
		font-size: 32rpx;

		.requierText {
			display: inline-block;
			width: 10rpx;
			color: #f43f3b;
			margin-right: 10rpx;
		}

		.label {
			width: 240rpx;
			margin-right: 10rpx;
			text-align: ri;
		}

		input {
			height: 60rpx;
		}
		.textA {
			width: 100%;
			height: 100%;
		}
	}

	.login {
		font-size: 32rpx;
		margin: 60rpx 54rpx 30rpx 54rpx;
		height: 96rpx;
		color: #fff;
		background-image: linear-gradient(to left, $color, #00aaff);
	}
}
.contHeight {
	height: calc(100% - 105rpx);
}
.appointContainer {
	width: 690rpx;
	height: 100%;
	margin: 0 auto;
	padding: 30rpx 0;
	.searchCont {
		width: 100%;
		border-bottom: 20rpx solid #f0f0f0;
		margin-bottom: 30rpx;
		.marbot10 {
			margin-bottom: 10rpx;
		}
		.title {
			border-left: 10rpx solid $color3;
			padding-left: 30rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.searchBtn {
			width: 120rpx;
			height: 60rpx;
			background: $color;
			border-radius: 10rpx;
			color: #fff;
		}
		.searchView {
			width: 100%;
			margin-bottom: 20rpx;
			label {
				font-weight: bold;
				margin-right: 10rpx;
			}
			.picker {
				border: 1px solid #ccc;
				border-radius: 10rpx;
				height: 50rpx;
				input {
					width: 100%;
					height: 50rpx;
					padding-left: 15rpx;
				}
			}
			.statusact {
				border: 1px solid $color3 !important;
				background: $color3 !important;
				color: #fff !important;
			}
			.status {
				width: 120rpx;
				height: 50rpx;
				border: 1px solid #ccc;
				border-radius: 10rpx;
				color: #ccc;
			}
		}
	}
	.list-cell {
		width: 690rpx;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 10rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		border-bottom: 20rpx solid #f0f0f0;
		.title {
			width: 100%;
			height: 80rpx;

			box-sizing: border-box;

			font-size: 30rpx;
			font-family: FZLTXHK;
			font-weight: normal;
			color: #282828;
			border-bottom: 1px solid #d6d6d6;
			.name {
				border-left: 10rpx solid $color3;
				padding-left: 30rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
			.status {
				font-size: 28rpx;
				color: $color;
			}
			.borderlet {
				width: 10rpx;
				height: 40rpx;
				border-radius: 10rpx;
				background: linear-gradient(240deg, #3cb7e7, #32c3a9);
				margin-right: 15rpx;
			}
			.titleW {
				width: 360rpx;
			}
		}

		.cont {
			width: 100%;
			padding: 20rpx 20rpx 20rpx 30rpx;
			box-sizing: border-box;

			.status {
				width: 100%;
				font-size: 30rpx;
				font-family: FZLTXHK;
				font-weight: normal;
				margin-bottom: 30rpx;
				label {
					color: #888888;
					margin-right: 30rpx;
					width: 130rpx;
					flex-shrink: 0;
				}
				.titlelabel {
				}
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 30rpx;
				}
				.ysp {
					color: #51b067;
				}

				.dsp {
					color: #ffa01e;
				}
			}
		}

		.czBtn {
			width: 100%;
			height: 100rpx;

			.combtn {
				width: 200rpx;
				height: 60rpx;

				border-radius: 27rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
			}
		}

		.padTop {
			border-top: 1px solid #d6d6d6;
		}

		.bg1 {
			background-color: #51b067;
		}

		.bg2 {
			background-color: #f86b6b;
		}

		.bg3 {
			background-color: #579dff;
		}
	}
}
</style>
